<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
<!--table: 表示表格的开始与结束
tr(table row): 表示表格的一行
td(table datacell): 表示表格的单元格,是真正存放数据的地方
border: 表格边框 style="border-collapse: collapse;"合并边框线
text-align:center; 文本水平对齐方式:居中 -->
 <table border="1px"  style="border-collapse: collapse;">
     <caption>讲师信息表</caption>
     <tr>
         <th >序号</th>
         <th>姓名</th>
         <th>科目</th>
     </tr>
     <tr>
         <td style="text-align: center;">1</td>
         <td>科晶</td>
         <td>基础</td>
     </tr><tr>
         <td style="text-align: center;">2</td>
         <td>传奇</td>
         <td>框架</td>
     </tr><tr>
         <td style="text-align: center;">3</td>
         <td>晓宇</td>
         <td>IVOS。。。。。</td>
     </tr>
 </table>
<hr>
<table border="1px">
    <caption>合并单元格</caption>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td rowspan="2">1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!-- 跨列,从当前单元格开始,向右合并n个单元格!
         注意:n包含当前单元格自己!被合并的单元格一定得删掉!合并单元格写在td里!-->
        <td colspan="2">2-1</td>
        <!--        <td>2-2</td>-->
        <!--        <td>2-3</td>-->
        <!-- 跨行,从当前单元格开始,向下合并n个单元格!-->
        <td rowspan="3">2-4</td>
    </tr>
    <tr>
        <td colspan="3">3-1</td>
        <!--        <td>3-2</td>-->
        <!--        <td>3-3</td>-->
        <!--        <td>3-4</td>-->
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <!--        <td>4-4</td>-->
    </tr>
</table>
<hr>
<table border="1" style="border-collapse: collapse">
    <caption>购物车</caption>
   <tr>
       <th>商品编号</th>
       <th>商品名称</th>
       <th>商品价格</th>
   </tr>
    <tr>
        <td>1</td>
        <td>小米Air</td>
        <td>5877</td>
    </tr>
    <tr>
        <td>2</td>
        <td>华为遥遥遥遥领先</td>
        <td>5877</td>
    </tr>
    <tr>
        <td>总价:</td>
        <td colspan="2">100000</td>

    </tr>
</table>
</body>
</html>